import { smartTranslate as $t } from '@/lang';
import { useVxeGridUtils } from '@/composables/useVxeGridUtils';
import { computed } from 'vue';

export const useToolbar = (options = {}) => {
  const { buttons, formItems, showSearch, isSelectionMode, toolsAuth } =
    options;
  const showTree = options.showTree ?? ref();

  const { renderToolbarButton, renderToolbarTool } = useVxeGridUtils();

  // 工具栏右侧按钮 因与弹窗逻辑冲突，将搜索按钮显示到表单中
  // const tools = renderToolbarTool([
  //   {
  //     code: 'submit_code',
  //     name: $t('common.action.search', '搜索'),
  //     status: 'primary',
  //     icon: 'Search',
  //   },
  //   {
  //     code: 'reset_code',
  //     name: $t('common.action.reset', '重置'),
  //     status: 'info',
  //     icon: 'Refresh',
  //   },
  // ]);

  const toolbarConfig = computed(() => {
    // 如果是选择模式，则不显示工具栏
    if (isSelectionMode.value) return {};

    // 隐藏和显示表格顶部搜索表单
    const search_icon = computed(() => {
      return showSearch.value ? 'vxe-icon-arrow-up' : 'vxe-icon-arrow-down';
    });

    // 隐藏和显示侧栏查询树
    const tree_icon = computed(() => {
      return showTree.value ? 'vxe-icon-arrow-left' : 'vxe-icon-arrow-right';
    });

    // 显示和隐藏搜索栏
    const showSearchtools = [
      {
        code: 'search_code',
        circle: true,
        icon: search_icon.value,
      },
    ];
    // 显示和隐藏侧栏查询树
    const showTreeTools = [
      {
        code: 'tree_code',
        circle: true,
        icon: tree_icon.value,
      },
    ];
    return {
      print: toolsAuth.print || false,
      import: toolsAuth.import || false,
      export: toolsAuth.export || false,
      refresh: true,
      zoom: true,
      custom: true,
      buttons: renderToolbarButton?.(buttons) || buttons,
      tools: [
        // 搜索按钮的显示和隐藏，因与弹窗逻辑冲突，将搜索按钮显示到表单中
        // ...(formItems?.value?.length > 0 ? tools : []),
        ...(toolsAuth?.hasTree ? showTreeTools : []),
        ...(formItems?.value?.length > 0 ? showSearchtools : []),
      ],
    };
  });

  return toolbarConfig;
};
